<template>
  <div class="cusop">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="客户分群" name="first" class="cus-el-tabs">
        <div class="cus-label-div">
          <div class="maxHuman"><span class="midSpan">重点运营人群</span></div>
          <div class="el-row-div">
            <el-row :gutter="20">
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <div class="clearfix">
                    <div class="clear-divone">
                      <span>兴趣人群</span>
                    </div>
                    <div class="clear-divtwo">
                      <span>人群总数</span>
                      <h3>0</h3>
                      <!--  -->
                      <button class="buttonone">人群分析</button>
                      <button class="buttontwo">短信群发</button>
                    </div>
                  </div>
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <div class="grid-content bg-purple">
                    <div class="clearfix">
                      <div class="clear-divoneone">
                        <span>新成交客户人数</span>
                      </div>
                      <div class="clear-divtwo">
                        <span>人群总数</span>
                        <h3>0</h3>
                        <!--  -->
                        <button class="buttonone">人群分析</button>
                        <button class="buttontwo">短信群发</button>
                      </div>
                    </div>
                  </div>
                </div></el-col
              >
            </el-row>
          </div>
          <div class="humandiv"><span class="midSpan">我的人群库</span></div>
          <div class="divdiv">
            <el-button type="primary" class="minbutton">添加人群</el-button>
          </div>
          <div class="table-div">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="人群名称" width="180">
              </el-table-column>
              <el-table-column prop="name" label="人群定义" width="180">
              </el-table-column>
              <el-table-column prop="name" label="人群数量" width="180">
              </el-table-column>
              <el-table-column prop="name" label="更新时间" width="180">
              </el-table-column>
              <el-table-column prop="address" label="操作"> </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang='scss' scoped>
@import "../assets/scss/baseColor";
.table-div {
  margin-top: 20px;
}
.divdiv {
  margin-top: 20px;
}

.humandiv {
  height: 50px;
  width: 100%;
  background-color: $back-color;
  border: 1px solid rgb(255, 255, 255);
  margin: 0 auto;
  margin-top: 30px;
}
.cus-label-div {
  background: rgb(255, 255, 255);
  height: 700px;
  padding: 10px;

  .midSpan {
    margin-left: 20px;
    margin-top: 10px;
    border-left: 3px solid red;
    display: block;
    padding: 3px;
    width: 100px;
    height: 20px;
  }
  .clearfix {
    height: 200px;
    box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.75);
    .clear-divtwo {
      text-align: center;
      span {
        display: inline-block;
        margin-top: 15px;
        padding: 0 0 10px 0;
      }

      button {
        color: rgb(43, 141, 221);
        border: 1px solid rgb(44, 140, 218);
        background-color: rgb(255, 255, 255);
        padding: 5px 30px 5px 30px;
        border-radius: 5%;
      }
      .buttonone {
        margin-left: 0px;
      }
      .buttontwo {
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .clear-divoneone {
      text-align: center;
      height: 80px;
      background-color: rgb(67, 207, 124);
      line-height: 80px;
      color: rgb(255, 255, 255);
      font-size: 10;
    }
    .clear-divone {
      height: 80px;
      background-color: rgb(92, 181, 255);
      line-height: 80px;
      color: rgb(255, 255, 255);
      font-size: 10;
      text-align: center;
    }
  }
  .el-row-div {
    margin-top: 15px;
  }

  .maxHuman {
    height: 50px;
    width: 100%;
    background-color: $back-color;
    border: 1px solid rgb(255, 255, 255);
    margin: 0 auto;
  }
}
</style>


<script>
export default {
  name: "custopView",
  data() {
    return {
      activeName: "first",
    };
  },
  components: {},
  methods: {},
};
</script>
